<template>
  <div class="equipinfo-container titlebar-page">
    <TitleBar>
      <div class="tab-wrapper" slot=rest>
        <tab :active-color="colors.white" class="home-tabbar" :line-width="2" custom-bar-width="30px" :bar-active-color="colors.white" :scroll-threshold="7">
          <tab-item :selected="tabSelected === item.value" v-for="(item, i) of tabList" :key="i" @on-item-click="onTabClicked(item, i)">{{item.text}}</tab-item>
        </tab>
      </div>
    </TitleBar>

    <div class="equip-list-wrapper">
      <ul class="equip-list">
        <li v-for="(item, i) of filteredEquipList" :key="i" class="equip-item" @click="showEquipDetail(item)">
          <x-img  :default-src="require('../../assets/images/default-card.png')"  :src="item.equUrl" alt="" class="image"/>
          <div class="name">{{item.equName}}</div>
          <div class="type">
            <img src="../../assets/images/coin.png" alt="" srcset="">
            <span>{{item.money}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="dialog-wrapper" v-if="dialog">
      <div class="dialog">
        <img :src="equipSelected.relationUrl" alt="" srcset="">
        <div class="actions">
          <close-circle-outline-icon style="color: #e84835;" @click="dialog =  false"></close-circle-outline-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar';
import {XImg} from 'vux';
import {colors} from '../../utils/theme';
import {mapState} from 'vuex';
export default {
  data() {
    return {
        dialog: false,
        colors,
        tabSelected: 1,
        tabList: [{
          text: '攻击',
          value: 1
        },{
          text: '法术',
          value: 2
        },{
          text: '防御',
          value: 3
        },{
          text: '移动',
          value: 4
        },{
          text: '打野',
          value: 5
        },{
          text: '辅助',
          value: 6
        }],
        equipSelected: {}
    };
  },
  computed: {
    ...mapState(['equip_list']),
    filteredEquipList: function() {
      return this.equip_list.filter((item)=>{
        if(this.tabSelected === 0) {
          return true;
        }
        return this.tabSelected === item.equType
      })
    }
  },
  mounted() {
    
  },
  methods: {
    onTabClicked(item) {
      this.tabSelected = item.value;
    },
    showEquipDetail(item) {
      this.equipSelected = item;
      this.dialog = true;
    },

  },
  components: {
    TitleBar,
    XImg
  }
};
</script>

<!-- v-html 中的内容不含在scope中  不能加scoped-->
<style lang="less" scoped>
.equipinfo-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .tab-wrapper {
    width: 100%;
  }

  .equip-list-wrapper {
    width: 100%;
    padding: 4px;
    z-index: -1;
    .equip-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .equip-item {
        flex-basis: 24%;
        flex-shrink: 24%;
        height: 7rem;
        position: relative;
        overflow: hidden;
        padding: 1px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 12px 0;
        .image {
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
        }
        .name {
          color: #222;
          font-size: 0.9rem;
        }
        .type {
          color: #4d4d4d;
          font-size: 0.72rem;
          display: flex;
          align-items: center;
          img {
            margin-right: 4px;
            width: 0.8rem;
            height: 0.8rem;
          }
        }
      }
    }
  }

  .dialog {
    width: 80%;
    height: 60%;
    img {
      width: 100%;
      
    }
    .actions {
      height: 2rem;
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 0.2rem;
    }
  }
}
</style>
